<template>

  <a-modal
    :title="$ti18('rxList.action','操作')"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="validate"
  >
    <a-card :bordered="true">
      <a-row :gutter="8">
        <a-col :span="5" >

          <a-input style="margin-bottom: 8px" :placeholder="$ti18('title.dimension','搜索维度','applicationLang')" v-model="searchValue" @change="handleChange" ref="searchInput" >
            <a-icon slot="prefix" type="search" />
            <a-icon v-if="searchValue" slot="suffix" type="close-circle" @click="emitEmpty" />
          </a-input>
          <a-tree
            v-if="dimTree.length>0"
            :treeData="dimTree"
            @expand="onExpand"
            :expandedKeys="expandedKeys"
            :autoExpandParent="autoExpandParent"
            @select="handleDimSelect">
            <template slot="title" slot-scope="{title}">
            <span v-if="title.indexOf(searchValue) > -1">
              {{ title.substr(0, title.indexOf(searchValue)) }}
              <span style="color: red">{{ searchValue }}</span>
              {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
            </span>
              <span v-else>{{ title }}</span>
            </template>
          </a-tree>

        </a-col>

      </a-row>

    </a-card>

  </a-modal>
</template>

<script>

import { Tree } from 'ant-design-vue'
import OsGroupApi from '@/api/user/org/osGroup'

  export default {
    name: 'GroupSelectModel',
    components: {
      Tree,
      STree
    },
    data () {
      return {
        visible: false,
        dimTree: [],
        selectedRowKeys: [],
        selectedRows: []
      }
    },
    created () {
        OsGroupApi.getGroupListByDimId({ dimId: 1 }).then(res => {
          const data = res.data
          console.log("group_data", data)
          this.buildtree(data, this.dimTree, '0')
          this.expandedKeys = data.map(m => m.parentId)
          this.dataDimList = data.map(m => {
            return { key: m.groupId, title: m.name }
          })
      })
    },
    methods: {
      add () {
        this.visible = true
      },
      buildtree (list, arr, parentId) {
        list.forEach(item => {
          if (item.parentId === parentId) {
            var child = {
              key: item.groupId,
              value: item.groupId, // value是给modal的select用的，2者属性不一样
              title: item.name,
              scopedSlots: { title: 'title' },
              children: []
            }
            this.buildtree(list, child.children, item.groupId)
            if (child.children.length === 0) { delete child.children }
            arr.push(child)
          }
        })
      },
      // 下面是树相关方法
      onExpand  (expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      emitEmpty () {
        this.$refs.searchInput.focus()
        this.searchValue = ''
        this.searchDept()
      },
      getParentKey (key, tree) {
        let parentKey
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i]
          if (node.children) {
            if (node.children.some(item => item.key === key)) {
              parentKey = node.key
            } else if (this.getParentKey(key, node.children)) {
              parentKey = this.getParentKey(key, node.children)
            }
          }
        }
        return parentKey
      },
      handleChange (e) {
        this.searchDept()
      },
      searchDept () {
        const value = this.searchValue
        const expandedKeys = this.dataList.map((item) => {
          if (item.title.indexOf(value) > -1) {
            const parentKey = this.getParentKey(item.key, this.deptTree)
            return parentKey
          }
          return null
        }).filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          expandedKeys,
          autoExpandParent: true
        })
      },
      handleDimSelect (selectedKeys, info) {
        this.queryParam = {
          groupId: selectedKeys[0],
          relTypeId : 1
        }
       // this.$refs.table.refresh(true)

      }
    }
  }
</script>

<style scoped>

</style>
